<template>
  <div class="as-switch"
       ref="asSwitch"
       :class="[{'is-checked':value,'is-disabled':disabled},
                 size?'as-switch--'+size:'']"
       @click="disabled?'':model=!model">
    <div class="as-switch__inner"
         :style="{left:left+'px'}"></div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "AsSwitch",
  props: {
    value: {},
    disabled: Boolean,
    size: String
  },
  watch: {
    model(newVal) {
      if (newVal) {
        this.left = 0;
      } else {
        let reduceWidth =
          this.size === "small" ? 18 : this.size === "mini" ? 16 : 20;
        this.left = this.$refs.asSwitch.getBoundingClientRect().width - reduceWidth;
      }
    }
  },
  computed: {
    model: {
      set(val) {
        this.$emit("input", val);
      },
      get() {
        return this.value;
      }
    }
  },
  data() {
    return {
      left: 0
    };
  },
  mounted() {
    if (!this.model) {
      let reduceWidth =
        this.size === "small" ? 18 : this.size === "mini" ? 16 : 20;
      this.left = this.$refs.asSwitch.getBoundingClientRect().width - reduceWidth;
    } else {
      this.left = 0;
    }
  }
};
</script>
